<template>
    <div>
        <div class="nav-container">
            <ul class="left menu">
                <li class="menu-item">
                    <router-link to="/index" active-class="active">首页</router-link>
                </li>
                <li class="menu-item">
                    <router-link to="/communitySquare" active-class="active">圈子广场</router-link>
                </li>
            </ul>

            <ul class="right menu">
                <li class="menu-item" style="font-size: 20px;">
                    <router-link to="/message" active-class="active">
                        <i class="el-icon-message-solid"></i>
                    </router-link>
                </li>
                <div class="avatar-warp" v-if="isLogin">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <span><el-avatar fit="fill"  :src="userInfo.avatar" :size="40"></el-avatar><i
                                class="el-icon-caret-bottom"></i></span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="center">个人中心</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                <div class="avatar-warp" v-else>
                    <el-avatar @click.native="loginClick" :size="40">登录</el-avatar>
                </div>

            </ul>
        </div>
    </div>
</template>

<script>
import { getToken, removeToken } from '@/utils/auth';
import { logout } from '@/api/login';
import { mapGetters } from 'vuex'
import { refresh } from 'less';
export default {
    data() {
        return {
            activeIndex: 1,
            userInfo: {
                avatar:null
            },
            isLogin: false
        }
    },
    methods: {
        loginClick() {
            localStorage.setItem("logUrl",this.$router.currentRoute.fullPath)
            this.$router.push('/login')
        },
        handleCommand(command) {
            if (command === "logout") {
                this.logout();
            }else if(command === "center"){
                this.$router.push("/center/personalInfo")
            }
        },
        logout: function () {
            var that = this;
            console.log(that.$route.path);
            logout().then((response) => {
                removeToken();
                localStorage.removeItem("userInfo");
                that.isLogin = false;
                // window.location.reload();
                that.$message({
                    type: "success",
                    message: response.msg,
                });
                //如果当前路由是在用户个人信息界面则返回到首页
                // let rex = new RegExp("^/center(/.*)?$");
                // if (rex.test(that.$route.path) || that.$route.path == "/chat") {
                //     that.$router.push({
                //         path: "/",
                //     });
                // }
            });
        },
        refresh(user){
            localStorage.setItem("userInfo",JSON.stringify(user));
            this.userInfo.avatar = user.avatar;
        }
    },
    computed: {
    },
    created() {
        this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
        if (this.userInfo && getToken()) {
            this.isLogin = true;
        } else {
            this.isLogin = false;
        }
    },
    mounted () {
        this.$bus.$on("my-info-updated",this.refresh);

    },
    destroyed () {
        ;
    },

}
</script>

<style lang="scss" scoped>
.logo {
    width: 200px;
    height: 40px;
    background-color: black;
    display: inline-block;
}

a {
    color: black;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease-out;
}



.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    height: 100%;
    bottom: 0;

    li {
        display: inline-block;

    }
}


.left {
    .menu-item {
        margin-right: 20px;
    }

    a {
        width: 80px;
        line-height: 50px;
        text-align: center;
        padding: 10px 0px;
    }
}

.right {
    right: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;

    li {
        width: 40px;
        text-align: center;
    }

    .avatar-warp {
        width: 60px;
        text-align: center;
        cursor: pointer;
    }

}



.nav-container {
    width: 1146px;
    height: 70px;
    margin: auto;
    user-select: none;
    position: relative;
    box-sizing: border-box;
}

.active {
    color: red;
}
</style>